<template>
	<view class="z-button-picker">
		<u-button class="z-button-picker-button" @click="open">
			<text>{{ value }}</text>
			<view class="z-button-picker-icon">
				<u-icon name="arrow-down" color="#595959" size="10"></u-icon>
			</view>
		</u-button>
		<u-picker v-if="!keyName" ref="picker" :show="showPicker" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		<u-picker v-if="keyName" ref="picker" :show="showPicker" :columns="columns" :keyName="keyName" @confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	export default {
		props: ['showPicker', 'value', 'list', 'keyName'],
		data() {
			return {
				columns: [
					[]
				]
			}
		},
		methods: {
			open() {
				this.$emit('open')
			},
			cancel() {
				this.$emit('cancel')
			},
			confirm(val) {
				this.$emit('confirm', val.value[0])
			}
		},
		watch: {
			list: {
				handler(n, o) {
					this.$refs.picker.setColumnValues(0, n)
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.z-button-picker {
		width: auto;
		display: inline-block;
		
		.z-button-picker-button {
			width: auto;
			display: inline-block;
			
			.z-button-picker-icon {
				display: inline-block;
				margin-left: 2px;
			}
		}
	}
</style>